<template>
  <div class="search">
    <div class="select-time">
      <div class="item start">
        <span class="name">住</span>
        <span class="date">{{ startDate }}</span>
      </div>
      <div class="item end">
        <span class="name">离</span>
        <div class="date">
          {{ endDate }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="keyword">
        <!-- 关键字/位置/民宿 -->
        <input type="text" :value="modelValue" @input="changeValue" placeholder="关键字/位置/民宿">
      </div>
    </div>
    <div class="right">
      <i class="icon-search"></i>
    </div>
  </div>
</template>

<script setup>
import useMainStore from '@/stores/modules/main';
import { formatMonthDay } from "@/utils/format_date"
import { computed } from 'vue';
const mainStore = useMainStore()
const startDate = computed(() => formatMonthDay(mainStore.startDatechangeValue, 'MM.DD'))
const endDate = computed(() => formatMonthDay(mainStore.endDate, 'MM.DD'))
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const changeValue = (e) => {
  emit('update:modelValue', e.target.value)
}
</script>

<style lang="less" scoped>
.search {
  display: flex;
  flex-direction: row;
  align-items: center;

  height: 45px;
  line-height: 45px;

  padding: 0 10px;
  font-size: 14px;
  color: #999;

  border-radius: 6px;
  background: #f2f4f6;

  .select-time {
    display: flex;
    flex-direction: column;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: normal;
      font-size: 10px;

      .date {
        position: relative;
        color: #333;
        margin: 0 10px 0 3px;
        font-weight: 500;
      }
    }

    .end .date::after {
      content: " ";
      width: 0;
      height: 0;
      border: 4px solid #666;
      border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #666;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      bottom: 0px;
      right: -12px;
    }


  }

  .content {
    position: relative;
    flex: 1;
    padding: 0 6px;
    text-align: center;
    border-left: 1px solid #fff;

    .keyword {
      max-width: 155px;
      font-size: 12px;

      input {

        outline-style: none; // 取消边框
        border: none; // 取消边框
        text-indent: 2em; // 设置内部缩进
        width: 100%;
        height: 40px;
        // border: 1px solid #000;
        background-color: transparent;
        font-size: 14px;
        line-height: 40px;
      }
    }
  }

  .right {
    display: flex;
    align-items: center;
  }

  .icon-search {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-image: url(../../assets/img/home/home-sprite.png);
    // 雪碧图
    background-position: -29px -151px;
    background-size: 207px 192px;
  }
}
</style>